<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	<title>Ejemplo</title>

	<!-- Se cargaran los archivos desde las carpeta de atras. -->
	<link rel="stylesheet" type="text/css" href="../ejemplos.css"/>
	<script type="text/javascript" src="../../../js/lib.js"></script>
	<script type="text/javascript" src="../../../js/ajax.js"></script>
</head>

<body>

	<h1>Ejemplo #1</h1>

	<p>En este ejemplo se mostrará como utilizar el super simple objeto "Ajax" para ejecutar solicitudes
	a cualquier archivo PHP. Lo que este ejemplo hace es mostrar un numero aleatorio que se obtiene desde
	el servidor cada vez que se presiona un boton.
	</p>

	<div class="code">
		<div>
			<b>Código del botón (cuando se hace click):</b>

			<pre>
function botonPresionado ()
{
	Ajax.request ("obtener_numero.php", null, function (respuesta)
	{
		document.getElementById("resultado").innerHTML = respuesta.EL_NUMERO;
	});
}
			</pre>
		</div>

		<div>
			<b>Código del archivo <em>obtener_numero.php</em>:</b>

			<pre>
&lt;?php

	$resultado = array (
		'EL_NUMERO' => rand()
	);
	
	echo json_encode ($resultado);

?&gt;
			</pre>
		</div>
	</div>

	<div class="result">
		<b>Resultado:</b>

		<div>
			<button onclick="botonPresionado()">Clickeame!!</button>
			<h4 id="resultado">(Resultado va a ir aqui)</h4>
		</div>
	</div>

	<script>

		function botonPresionado ()
		{
			Ajax.request ("obtener_numero.php", null, function (respuesta)
			{
				document.getElementById("resultado").innerHTML = respuesta.EL_NUMERO;
			});
		}

	</script>

</body>

</html>
